<template>
	<view class="listPage">
		<uni-drawer :visible="visible">
		    <view style="padding:30upx;">
		        <view class="uni-title">组织结构</view>
		    </view>
			<uni-list>
				<uni-list-item title="南京公司"></uni-list-item>
			    <uni-list-item title="变电运维室"></uni-list-item>
			</uni-list>
			<view style="padding:30upx;">
			    <view class="uni-title">安具类型</view>
			</view>
			<uni-list>
				<uni-list-item title="绝缘靴"></uni-list-item>
			    <uni-list-item title="绝缘手套"></uni-list-item>
			</uni-list>
		</uni-drawer>
		
		<view class="null" v-if="list.length === 0" key="null">
			暂无数据
		</view>
		<view v-else key="has">
			<view class="box">
				<image class="box-img" mode="aspectFill" src="//via.placeholder.com/100"></image>
				<view class="box-con">
					<view class="box-name">
						绝缘手套
					</view>
					<view class="box-row">
						<view class="left" :class="{'active1':active===3}" @click="tabSwitch(3)">
							<image class="ico kucun" src="../../static/img/kucun.png" mode="aspectFill"></image>
							<text>库存(100)</text>
						</view>
						
						<view class="cancel" :class="{'active2':active===6}" @click="tabSwitch(6)">
							<image class="ico baofei" src="../../static/img/baofei.png" mode="aspectFill"></image>
							<text>报废(100)</text>
						</view>
						<view class="use" :class="{'active3':active===5}" @click="tabSwitch(5)">
							<image class="ico lingyong" src="../../static/img/communication.png" mode="aspectFill"></image>
							<text>领用(100)</text>
						</view>
					</view>
				</view>
			</view>
			<view class="list">
				<view class="item" v-for="item in list" :key="item.tool_id">
					<view class="header">
						<view class="name">
							<span>{{item.t_name}}</span>
							<image class="ico biaoshi" src="../../static/img/biaoshi.png" mode="aspectFill" ></image>
						</view>
						<view class="operation">
							<view class="btn face" @click="toFace(item)">
								外观
							</view>
							<view class="btn all" @click="toAll">
								全流程
							</view>
						</view>
					</view>
					<view class="item-row">
						<view class="item-col">
							名称：{{item.i_name}}
						</view>
						<view class="item-col">
							型号：{{item.model}}
						</view>
					</view>
					<view class="item-row">
						<view class="item-col">
							厂家：{{item.mf_name}}
						</view>
						<view class="item-col">
							出厂日期：{{item.release_date}}
						</view>
					</view>
					<view class="item-row">
						<view class="item-col">
							上次检测：{{item.last_inspect_time}}
						</view>
						<view class="item-col">
							有效期：{{item.expire_day}}
						</view>
					</view>
					<view class="checked">
						{{toolStatus[item.state]}}
					</view>
				</view>
			</view>
		</view>
		
		
		
	</view>
</template>

<script>
	import { mapMutations } from 'vuex'
	import uniDrawer from "@/components/uni-drawer/uni-drawer.vue"
	import uniList from "@/components/uni-list/uni-list.vue"
	import uniListItem from "@/components/uni-list-item/uni-list-item.vue"
	import api from '../../consts/api.js'
	import { toolStatus } from '../../consts/mapCodes.js'
	let offset = 0
	let total = 0
	let t_code = 0
	export default {
		components: {uniDrawer,uniList,uniListItem},
		data() {
			return {
				toolStatus,
				list: [],
				total_page: 0,
				active: 3,
				visible: false
			}
		},
		methods: {
			...mapMutations(['setToolParams']),
			toFace({tool_id, ...obj}) {
				this.$store.commit('setToolParams',obj)
				uni.navigateTo({
					url: `../check/check?tool_id=${tool_id}`,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			toAll() {
				uni.navigateTo({
					url: '../all/all',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			tabSwitch(n) {
				this.active = n
				this.toolList()
			},
			async toolList() {
				let res = await this.$fetch('POST',api.toolList + `?offset=${offset}&limit=10`, {
					t_code: t_code,
					state: this.active
				})
				let {code, data, total_page} = res.data
				total = total_page
				this.list = [...this.list, ...data]
			}
		},
		onLoad(opt) {
			t_code = opt.t_code
			this.toolList()
		},
		onReachBottom() {
			console.log('reach')
			offset++
			console.log(offset, total)
			if (offset >= total) {
				offset = total
				return
			}
			this.toolList()
		}
	}
</script>

<style>
@import url("../../styles/var.css");
.listPage{
	padding-top: 40upx;
	position: relative;
	min-height: 100vh;
	background: var(--primaryColor);
}
.null {
	height: 100vh;
	line-height: 100vh;
	color: #FFFFFF;
	text-align: center;
}
.box {
	margin: 0 20upx 40upx;
	border-radius: 30upx;
	background: #FFFFFF;
	height: 300upx;
	display: flex;
}
.box-img {
	width: 160upx;
	height: 160upx;
	margin: 70upx 20upx;
	flex: 2 160upx 0;
}
.box-con {
	flex: 5;
}
.box-name {
	font-size: 40upx;
	margin: 60upx 0 0 0;
}
.box-row {
	display: flex;
	font-size: 28upx;
	line-height: 60upx;
}
.left {
	width: 160upx;
	color: rgb(46,152,148);
	text-align: center;
}
.use {
	width: 160upx;
	color: rgb(54,188,225);
	text-align: center;
}
.cancel {
	width: 160upx;
	color: rgb(255,174,0);
	margin-left: 20upx;
	text-align: center;
}
.active1 {
	/* background: rgb(224,240,239); */
	border-bottom: 1upx solid rgb(46,152,148);;
}
.active2 {
	/* background: rgb(224,240,239); */
	border-bottom: 1upx solid rgb(255,174,0);
}
.active3 {
	/* background: rgb(224,240,239); */
	border-bottom: 1upx solid rgb(54,188,225);
}
.ico {
	width: 40upx;
	height: 40upx;
	transform: translateY(10upx);
	margin-right: 10upx;
}
.lingyong {
	width: 53upx;
}
.biaoshi {
	margin-left: 10upx;
}
.list {
	margin: 40upx 0 0 0;
	background: #FFFFFF;
	min-height: calc(100% - 380upx);
	padding: 0 20upx;
}
.item {
	height: 300upx;
	border-bottom: 1upx solid #eee;
	padding-top: 40upx;
	position: relative;
}
.header {
	font-size: 40upx;
	display: flex;
}
.name {
	margin: -6upx 0 0 0;
	font-size: 40upx;
	flex: 2;
}
.operation {
	flex: 3;
	display: flex;
	justify-content: space-between;
}
.btn {
	width: 120upx;
	height: 60upx;
	line-height: 60upx;
	font-size: 26upx;
	text-align: center;
	border-radius: 80upx;
	transform: translateY(-10upx);
}
.face {
	background: rgb(46,152,148);
	color: #FFFFFF;
	margin:0 0 0 120upx;
}
.all {
	margin: 0;
	height: 58upx;
	border: 1px solid rgb(46,152,148);
	color: rgb(46,152,148);
}
.item-row {
	display: flex;
	padding-top: 30upx;

}
.item-col {
	flex: 1;
	color: #999999;
	font-size: 24upx;
}
.checked {
	font-size: 26upx;
	position: absolute;
	bottom: 20upx;
	right: 20upx;
}
</style>
